<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="add" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域 -->
    <div>

      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="loadData"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => del(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>
    </div>

    <article-modal ref="modal" @ok="refreshTable"></article-modal>
  </a-card>
</template>

<script>

import { ListMixin } from '@/mixins/ListMixin'
import { apiQueryArticleList } from '@/api/article'
import ArticleModal from './modules/ArticleModal'

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: 200
  }
]

export default {
  name: 'ArticleList',
  components: {
    ArticleModal
  },
  mixins: [ListMixin],
  data () {
    return {
      columns,
      loadData: parameter => {
        return apiQueryArticleList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    add () {
      this.$refs.modal.show('新增')
    },
    edit (record) {
      this.$refs.modal.show('修改', record)
    }
  }
}
</script>

<style scoped>

</style>
